<template>
  <div id="SilverPay">
    <c-title :hide="false" text="快捷支付-银典"></c-title>
    <div class="listBox">
      <div class="line">
        <div class="left">支付金额</div>
        <div class="right">￥{{ this.$route.query.money }}</div>
      </div>
      <div class="line">
        <div class="left">支付流水号</div>
        <div class="rights">{{ this.$route.query.sn }}</div>
      </div>
      <div class="line" v-if="radio">
        <div class="left">付款方式</div>
        <div class="rights">{{ getBank(radio).bank }}</div>
      </div>
      <div class="line" style="margin-bottom: 0;" v-if="step == 2">
        <div class="left">支付方式</div>
        <div class="rights">{{ getBank(radio).bank }} {{ getBank(radio).card_type_name }}（{{ getBank(radio).card.slice(13, 16) }}）</div>
      </div>
    </div>
    <div class="selectBank" v-if="step == 1">
      <div class="top">
        <div class="topLeft">选择银行卡</div>
        <div class="topRight" @click="toAdd">添加银行卡</div>
      </div>
      <div class="contenBox">
        <van-radio-group v-model="radio">
          <van-radio :name="item.id" checked-color="#F51D1D" v-for="(item, index) in list" :key="index">{{ item.bank }} {{ item.card_type_name }} ({{ item.card.slice(13, 16) }})</van-radio>
        </van-radio-group>
      </div>
    </div>
    <div class="codeBox" v-if="step == 2">
      <van-field v-model="smsMobile" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="primary" @click="checkCodeMethod" v-if="!btnTag">发送验证码</van-button>
          <div v-else class="countTxt">
            <span style="font-size: 0.6875rem; color: #666;">(已发送)</span>
            {{ btnText }}
          </div>
        </template>
      </van-field>
    </div>
    <div v-if="btnTag && step == 2" class="txtphone">已向手机{{ getBank(radio).mobile }}发送短信</div>

    <div class="posbtn set-pc-style">
      <div class="btn" @click="next" v-if="step == 1">下一步</div>
      <div class="btn" @click="confirmBtn" v-if="step == 2">确认</div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      step: 1,
      radio: "",
      list: [],
      order_pay_id: "",
      smsMobile: "",
      token: "",
      btnText: "获取验证码",
      timer: null,
      btnTag: false
    };
  },
  activated() {
    if (this.$route.params.order_pay_id) {
      this.order_pay_id = this.$route.params.order_pay_id;
    }
    this.getData();
  },
  methods: {
    next() {
      if (this.fun.isTextEmpty(this.radio)) {
        this.$dialog.alert({ message: "请选择银行卡" });
        return;
      }
      this.step = 2;
    },
    checkCodeMethod() {
      $http.get("order.merge-pay.silver-point-union-pay", { order_pay_id: this.order_pay_id, pay_union_card_id: this.radio }, "").then(response => {
        if (response.result == 1) {
          this.token = response.data.pay_msg.token;
          this.sendCodeAnimation();
        } else {
          this.$dialog.alert({ message: response.msg }).then(() => {
            this.$router.go(-2);
          });
        }
        this.isclick = false;
      });
    },
    // 倒计时
    sendCodeAnimation() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        Toast.success("验证码已发送");
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.btnText = this.count + "s";
            this.btnTag = true;
          } else {
            this.btnTag = false;
            this.btnText = "获取验证码";
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    confirmBtn() {
      if (this.fun.isTextEmpty(this.smsMobile)) {
        this.$dialog.alert({ message: "请输入验证码" });
        return;
      }
      this.unionPay();
    },
    unionPay() {
      let json = {
        ids: this.order_pay_id
      };
      if (this.$route.query.sn) {
        json.sn = this.$route.query.sn;
      }
      $http
        .post("plugin.silver-point-pay.frontend.union-card.pay", { code: this.smsMobile, token: this.token, order_pay_id: this.order_pay_id }, " ")
        .then(res => {
          console.log(res);
          if (res.result) {
            if (res.data.status == "101") {
              this.orderCheck();
            } else{
              this.$router.push(this.fun.getUrl("payBack", json));
            }
          } else {
            console.log(res, "errerrerror");
            this.$dialog.alert({ message: res.msg }).then(() => {
              this.$router.go(-1);
            });
           
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    orderCheck() {
      let json = {
        ids: this.order_pay_id
      };
      if (this.$route.query.sn) {
        json.sn = this.$route.query.sn;
      }
      $http
        .post("plugin.silver-point-pay.frontend.union-card.queryOrder", { pay_sn: this.$route.query.sn }, " ")
        .then(res => {
          console.log(res);
          if (res.result) {
            this.$router.push(this.fun.getUrl("payBack", json));
          } else {
            this.$dialog.alert({ message: res.msg }).then(() => {
                this.$router.go(-1);
              });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getBank(id) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id == id) {
          return this.list[i];
        }
      }
    },
    toAdd() {
      this.$router.push(this.fun.getUrl("addSilverBank", { order_pay_id: this.order_pay_id }, { money: this.$route.query.money, sn: this.$route.query.sn }));
    },
    getData() {
      $http
        .get("plugin.silver-point-pay.frontend.union-card.index", { sn: this.$route.query.sn }, " ")
        .then(res => {
          this.list = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.txtphone {
  text-align: left;
  color: #868686;
  font-size: 0.6875rem;
  margin-left: 0.9688rem;
  margin-top: 0.5938rem;
}

.selectBank {
  margin: 0 0.625rem;
  background: #fff;
  border-radius: 0.3125rem;
  padding: 1.0313rem 0.8438rem;

  .contenBox {
    padding-top: 1.125rem;

    .van-radio {
      margin-bottom: 0.7813rem;
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topRight {
      padding: 0.4688rem 0.5625rem;
      border-radius: 0.3125rem;
      border: 1px solid #f51d1d;
      color: #f51d1d;
    }
  }
}

.codeBox {
  margin: 0 0.625rem;
  border-radius: 0.3125rem;

  .van-cell {
    padding: 0.3125rem 0.625rem;
  }
}

.listBox {
  margin: 0.625rem;
  background: #fff;
  border-radius: 10px;
  padding: 1.0938rem 0.7813rem;

  .line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.7813rem;

    .left {
      font-size: 0.875rem;
      color: #333;
    }

    .right {
      color: #f51d1d;
      font-size: 0.875rem;
    }

    .rights {
      font-size: 0.875rem;
    }
  }
}

.posbtn {
  position: fixed;
  width: 100%;
  height: 3.125rem;
  bottom: 0;
  left: 0;
  padding: 0.3125rem 1.7188rem;
  background: #fff;

  .btn {
    height: 2.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    background: #f51d1d;
    border-radius: 0.3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>